<template>
    <div class="bookmark_container_template">
        <head-top signin-up='home' @signUpHandler="signUpHandlerCallback" @loginInHandler="loginInHandlerCallback">
        </head-top>
        <header id="main" class="explore-header-image">
            <h1 class="exploreHeader-title">Bookmark</h1>
            <h2 class="exploreHeader-subTitle">Please select one campaign in your bookmark to invest or quit if you are
                not interested in any campaigns</h2>
        </header>
        <div class="content-container">
            <el-row :gutter="20">
                <el-col :span="20">
                    <div class="query-result-area">
                        <div class="query-result">
                            <el-row :gutter="20">
                                <div class="empty-tip" v-if="bookmarkList && 0 != bookmarkList.length">
                                    <el-col :span="8" v-for="(item, index) in bookmarkList" :key="index">
                                        <funding-item :fundingItem="item" :backShow="true"
                                                      @myEvent="removeCallback"></funding-item>
                                    </el-col>

                                </div>
                                <div v-else>
                                    Your bookmark is currently empty.
                                </div>

                            </el-row>
                            <el-row :gutter="20">
                                <div style="width: 100%; text-align: center">
                                    <div style="margin: 36px">
                                        <el-button type="primary" @click="gotoExplorePage">CONTINUE EXPLORE</el-button>
                                    </div>
                                </div>
                            </el-row>
                        </div>
                    </div>
                </el-col>
                <el-col :span="4" class="ope-area-form">
                    <div class="tip">
                        <!--<p>
                            I don't want to invest any campaigns, quit the task
                        </p>-->
                    </div>
                    <el-button size="large" class="quit-button" type="danger" @click="quitTask">I do not wish to
                        <br>invest in any<br>campaign
                    </el-button>
                </el-col>
            </el-row>
        </div>
        <el-dialog title="We’d like to hear your feedback…" :visible.sync="isFormShow" class="tip-form">
            <el-form>
                <el-form-item>
                    <p class="tip">Please tell us your thoughts about the benefits and potential risk of investing in campaigns in our platform!
                    </p>
                    <el-input type="textarea" v-model="suggestion" :rows="4" ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="isFormShow = false">Cancel</el-button>
                <el-button type="primary" @click="feedbackSaveHandler" :disabled="!canSubmit">Submit</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import headTop from 'components/header/head'
    import {saveFeedback} from '@/api/feedback'
    import FundingItem from 'components/common/fundingItem'
    import {mapState, mapMutations, mapActions} from 'vuex'
    import {queryBookmarkByUID} from "@/api/bookmark";
    import {apiSaveUserPeak} from '@/api/user_peak'
    import {saveUserLog} from '@/api/log'
    import {getVersion} from '@/utils/auth'


    import {
        apiGetAllCampaign,
        apiGetAllCampaignByCreate,
        apiGetAllCampaignByEnd,
        apiGetAllCampaignByContent
    } from '@/api/campaign'

    export default {
        data() {
            return {
                timeOrder: 1,
                fundingItem: [],
                queryText: "",
                totalCount: 0,
                investmentFilter: 66,
                equityFilter: 27,
                investorFilter: 39,
                raisedFilter: 41,
                isFormShow: false,
                suggestion: "",
                bookmarkList: []
            }
        },

        async mounted() {

            this.initLoad()

        },

        components: {
            headTop,
            FundingItem
        },

        computed: {
            ...mapState({
                'userId': state => state.user.userId,
            }),
            totalPageSize() {
                return this.totalPage
            },
            canSubmit() {
                return this.suggestion.split(" ").length > 0
            }
        },
        watch: {
            timeOrder(newVal) {
                switch (newVal) {
                    case 1:
                        this.loadByCreateTime()
                        break;
                    case 2:
                        this.loadByCreateTime()
                        break;
                    case 3:
                        this.loadByEndTime()
                        break;
                }
            },
        },
        // 页面进入之前，请求数据
        beforeRouteEnter(to, from, next) {
            next(vm => {

                var tip = {
                    operation: "Enter bookmark page",
                    params: JSON.stringify({"userId": vm.userId})

                }

                saveUserLog(tip);

            })
        },
        beforeRouteLeave(to, from, next) {
            var tip = {
                operation: "Leave bookmark page",
                params: JSON.stringify({"userId": this.userId})

            }

            saveUserLog(tip);

            next()
        },
        methods: {
            gotoExplorePage() {
                this.$router.push('/explore');
            },
            async feedbackSaveHandler() {

                var tempInput = this.suggestion || ""

                /*if (tempInput.length < 50) {
                    this.$message.error("at least you should write more than 50 words ~~")
                    return
                }*/

                console.log("tijiao")


                var tip = {
                    operation: "Submit feedback",
                    params: JSON.stringify({"userId": this.userId})
                }

                saveUserLog(tip);


                var queryData = {
                    userId: this.userId,
                    campaignId: 0,
                    peakId: 0,
                    price: 0,
                    content: this.suggestion
                }

                const result = await saveFeedback(queryData)

                if (0 == result.code) {
                    this.isFormShow = false
                    this.$message.success("thanks for your feedback ~~")
                }

                window.version = getVersion()
                window.userId = this.userId;

               /*this.$alert('Thank you for completing the investment task! Please click on the below link to tell us about your experience ' +
                    'on the platform: <a href="javascript:void(0);" target="_blank" style="text-decoration: underline; font-weight: bold" onclick="openFeedbackLink('+')"> click here to start </a>', 'Notice', {
                    confirmButtonText: 'Confirm',
                    dangerouslyUseHTMLString: true
                })*/

            },
            removeCallback(id) {
                var finalIndex = null

                $.each(this.bookmarkList, function (index, item) {
                    if (id == item.bookmarkId) {
                        finalIndex = index
                    }
                })
                if (null != finalIndex) {
                    this.bookmarkList.splice(finalIndex, 1)
                    this.$message.success('remove success~~')
                }
            },
            quitTask() {


                var tip = {
                    operation: "Click “I do not wish to invest in any campaign”",
                    params: JSON.stringify({
                        "userId": this.userId,
                        "operation": "Click “I do not wish to invest in any campaign”"

                    })
                }

                saveUserLog(tip);

                this.$confirm('Are you sure you do not wish to invest in any campaign?', 'Notice', {
                    confirmButtonText: 'Confirm my decision and continue to questionnaire',
                    cancelButtonText: 'I am not ready. Back to the platform and continue browsing campaigns',
                    showClose: false,
                    closeOnClickModal: false,
                    // closeOnPressEscape: false,
                    customClass: 'my-custom-dialog',
                    cancelButtonClass: 'my-cancel-button',
                    confirmButtonClass: 'my-confirm-button',
                    type: 'warning'
                }).then(() => {
                    // this.doQuit()
                    /*this.$alert('Thank you for completing the investment task! Please click on the below link to tell us about your experience ' +
                        'on the platform: <a href="javascript:void(0);" target="_blank" style="text-decoration: underline; font-weight: bold" onclick="openFeedbackLink()"> click here to start </a>', 'Notice', {
                        confirmButtonText: 'Confirm',
                        dangerouslyUseHTMLString: true
                    })*/

                    var tip = {
                        operation: "Click not ready from not invest",
                        params: JSON.stringify({
                            "userId": this.userId,
                            "operation": "Click not ready from not invest"

                        })
                    }

                    saveUserLog(tip);


                    openFeedbackLink()
                }).catch(err => {
                    var tip = {
                        operation: "Click confirm from not invest",
                        params: JSON.stringify({
                            "userId": this.userId,
                            "operation": "Click confirm from not invest"

                        })
                    }

                    saveUserLog(tip);
                })


            },
            doQuit(){
                this.isFormShow = true

                var tip = {
                    operation: "Click “I do not wish to invest in any campaign”",
                    params: JSON.stringify({"userId": this.userId})
                }

                saveUserLog(tip);
            },
            async searchContentHandler() {
                this.initLoad()
            },
            async initLoad() {
                var that = this


                var res = await queryBookmarkByUID(this.userId)
                // 如果查询成功
                this.bookmarkList = res.bookmarkList

            },
            async loadByCreateTime() {
                var that = this

                var params = {
                    userId: this.userId,
                    page: 1
                }

                var res = await  apiGetAllCampaignByCreate(params)
                // 如果查询成功
                that.fundingItem = res.page.list;
                that.totalCount = res.page.totalCount
            },
            async loadByEndTime() {
                var that = this

                var params = {
                    userId: this.userId,
                    page: 1
                }

                var res = await  apiGetAllCampaignByEnd(params)
                // 如果查询成功
                that.fundingItem = res.page.list;
                that.totalCount = res.page.totalCount
            },
            formatTooltip(val) {
                return 66;
            },
            //点击图标刷新页面
            reload() {
                window.location.reload();
            },
            signUpHandlerCallback() {

            },
            loginInHandlerCallback() {

            },
            getPage() {
                return this.totalPage
            },
            async handleCurrentChange(val) {
                var that = this

                var params = {
                    userId: this.userId,
                    page: val
                }

                var res = await  apiGetAllCampaign(params)

                // 如果查询成功
                that.fundingItem = res.page.list;
            }

        },
    }

</script>

<style lang="scss">
    @import '../../style/mixin';


    .my-custom-dialog {
        .el-message-box__btns {
            display: flex;
            height: 80px;
            button {
                padding: 0px;
                height: 75px;
            }
            span {
                word-break:break-word;
                width:auto;
                display:block;
                white-space:normal;
                word-wrap: break-word ;
                overflow: hidden ;
                font-size: 15px;
                /*line-height: 18px;*/
            }
        }
        .my-cancel-button {
            height: 80px;
            width: 200px;
        }

        .my-confirm-button {
            height: 80px;
            width: 200px;
        }
    }

    .bookmark_container_template {
        min-height: 666px;

        .siteLogo {
            svg {
                height: 24px;
                width: 160px;
                fill: #EB1478;
            }
        }

        .explore-header-image {
            background-size: cover;
            background: url('/static/img/ex6.png') no-repeat center;
            height: 240px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            h1 {
                font-family: "Benton Sans", "Helvetica", "sans-serif";
                font-size: 48px;
                font-weight: normal;
                line-height: 48px;
                text-align: center;
                color: white;
            }
            h2 {
                font-family: "Benton Sans", "Helvetica", "sans-serif";
                font-size: 24px;
                line-height: 34px;
                font-weight: normal;
                color: white;
            }
        }

        .content-container {
            width: 90%;
            margin: 26px auto 0;
            .ope-area-form {
                height: 100%;
                margin-top: 16%;
                text-align: center;
                .tip {
                    margin-bottom: 26px !important;
                    p {
                        font-size: 16px;
                        font-style: italic;
                        font-weight: bold;
                        margin-bottom: 26px;
                    }
                }
                .quit-button {
                    min-width: 200px;
                    span {
                        font-size: 18px;
                        font-style: italic;
                        font-weight: bold;
                    }
                }
            }
            .empty-tip {
                font-style: italic;
                font-size: 16px;
                font-weight: bold;
                margin-top: 26px;
            }

        }
        .tip-form {
            .el-dialog__body {
                padding-top: 6px !important;
            }
            .el-form-item__content {
                line-height: 26px;
                .tip {
                    font-style: italic;
                    margin-bottom: 26px;
                }
            }
        }

    }

    .is-dark {
        span {
            color: white !important;
        }
    }

</style>
